import http from '@/utils/http'

export default {
  data() {
    return {
      vocabulary: [],
      loading: true,
      error: null,
      filter: '',
      currentPage: 1,
      pageSize: 20,
      total: 0,
      // 单词详情相关
      showWordDetail: false,
      selectedWord: null,
      // 音频播放相关
      audio: null
    }
  },
  async mounted() {
    await this.loadVocabulary()
  },
  methods: {
    getPhonetic(phonetic) {
      return `${phonetic.replace("美", "<br>美")}`
    },
    isWideScreen() {
      return window.innerWidth >= 768
    },
    async loadVocabulary() {
      try {
        this.loading = true
        const response = await http.get('/vocabulary/user', {
          params: {
            page: this.currentPage,
            limit: this.pageSize,
            filter: this.filter
          }
        })

        this.vocabulary = response.vocabulary || []
        this.total = response.total || 0
        this.loading = false
      } catch (err) {
        this.error = '加载生词本失败'
        this.loading = false
        console.error(err)
      }
    },

    formatDate(dateString) {
      if (!dateString) return 'N/A'
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    },

    async toggleFavorite(wordItem) {
      try {
        await http.post('/vocabulary/user', {
          word: wordItem.vocabulary,
          is_learned: wordItem.is_learned,
          is_favorite: !wordItem.is_favorite,
          times_encountered: wordItem.times_encountered,
          times_practiced: wordItem.times_practiced
        })

        // 更新本地状态
        wordItem.is_favorite = !wordItem.is_favorite
      } catch (err) {
        this.$message.error('操作失败')
        console.error(err)
      }
    },

    async markAsLearned(wordItem) {
      try {
        await http.post('/vocabulary/user', {
          word: wordItem.vocabulary,
          is_learned: true, // 标记为已学会
          is_favorite: wordItem.is_favorite,
          times_encountered: wordItem.times_encountered,
          times_practiced: wordItem.times_practiced
        })

        // 从列表中移除（因为只显示未学会的单词）
        this.vocabulary = this.vocabulary.filter(item => item.vocabulary !== wordItem.vocabulary)
      } catch (err) {
        this.$message.error('操作失败')
        console.error(err)
      }
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.currentPage = 1
      this.loadVocabulary()
    },

    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.loadVocabulary()
    },

    // 显示单词详情
    showWordDetails(wordItem) {
      this.selectedWord = wordItem;
      this.showWordDetail = true;
    },

    // 关闭单词详情弹窗
    closeWordDetail() {
      this.showWordDetail = false;
      this.selectedWord = null;

      // 停止播放音频
      if (this.audio) {
        this.audio.pause();
        this.audio = null;
      }
    },

    // 播放单词发音
    playPronunciation(wordItem) {
      if (wordItem.pronunciation) {
        // 停止当前播放的音频
        if (this.audio) {
          this.audio.pause();
        }

        // 创建新的音频对象并播放
        this.audio = new Audio(`data:audio/mp3;base64,${wordItem.pronunciation}`);
        this.audio.play();
      }
    }
  }
}